<template>
  <div class="replace-box">
    <iu-header>
      <template #left>
        <x-icon
          @click="back"
          type="ios-arrow-back"
          size="21"
          fill="#fff"
        ></x-icon>
      </template>
      <template #title>{{
        detail.name || detail.checkStandardItemName
      }}</template>
      <template #right>
       <div v-focusable  @click="backToHomepage">
          <iconSvg name="home" w="20px" h="22px" class="right_icon"></iconSvg>
        </div>
      </template>
    </iu-header>
    <div class="content">
      <div class="cate-nfo">
        <!-- <div class="info-list">
          <div style="font-size:16px; color: #fff;">
            {{ detail.name || detail.checkStandardItemName }}
          </div>
        </div> -->
        <template>
          <div class="info-list">
            <div class="contentList full">
              <div class="contentLeft">
                <span class="notNull">*</span>
                <span class="contentLeftFont">检查结果</span>
              </div>
              <div class="contentRight">
                <div class="produce-data-list-read">
                  <checker
                    v-model="result"
                    radio-required
                    default-item-class="read-item"
                    selected-item-class="read-item-selected"
                  >
                    <checker-item :value="1">
                      通过
                    </checker-item>
                    <!-- <checker-item :value="2">
                      不通过
                    </checker-item> -->
                    <checker-item :value="3">
                      有隐患
                    </checker-item>
                  </checker>
                </div>
              </div>
            </div>
            <template v-if="result == 3">
              <div class="contentList">
                <div class="contentLeft">
                  <span class="notNull">*</span>
                  <span class="contentLeftFont">隐患类型：</span>
                </div>
                <div class="contentRight">
                  <select
                    class="iu-select"
                    required
                    v-model="troubleForm.troubleType"
                  >
                    <option disabled selected hidden value>
                      - 请选择隐患类型
                    </option>
                    <option :value="'人员隐患'">人员隐患</option>
                    <option :value="'机械隐患'">机械隐患</option>
                    <option :value="'环境隐患'">环境隐患</option>
                    <option :value="'管理风险'">管理风险</option>
                  </select>
                </div>
              </div>
              <div class="contentList">
                <div class="contentLeft">
                  <span class="notNull">*</span>
                  <span class="contentLeftFont">隐患等级：</span>
                </div>
                <div class="contentRight">
                  <select
                    class="iu-select"
                    required
                    v-model="troubleForm.troubleLevel"
                  >
                    <option disabled selected hidden value>
                      - 请选择隐患等级
                    </option>
                    <option :value="'一般隐患'">一般隐患</option>
                    <option :value="'重大隐患'">重大隐患</option>
                  </select>
                </div>
              </div>
            </template>
            <div class="contentList full">
              <div class="contentLeft">
                <span class="notNull" v-if="result !== 1">*</span>
                <span class="contentLeftFont">详细说明</span>
              </div>
              <div class="contentRight">
                <textarea
                  name="userQuestion"
                  v-model="remark"
                  placeholder="请输入检查点描述"
                  class="userQuestion"
                  maxlength="100"
                ></textarea>
              </div>
            </div>
          </div>
          <div class="info-list">
            <div class="contentLeft">
              <div class="contentList upload">
                <span class="contentLeftFont">
                  <span class="notNull" v-if="result !== 1">*</span>
                  拍照取证：
                </span>
              </div>
              <div class="contentRight cancelPos ">
                <upload
                  :file-list="pictureList"
                  :loading="loading"
                  :max-count="4"
                  :max-size="5 * 1024 * 1024"
                  @oversize="oversize"
                  @overcount="overcount"
                  :file-stream="true"
                  @delete="deleteList"
                  @afterRead="afterRead"
                ></upload>
              </div>
            </div>
          </div>
          <div class="info-list" v-if="result == 3">
            <div class="contentList">
              <div class="contentLeft">
                <span class="notNull">*</span>
                <span class="contentLeftFont">整改部门</span>
              </div>
              <div class="contentRight">
                <organization
                  class="changeDep"
                  :selectDepartment="{
                    departmentName: troubleForm.rectificationDepartmentName
                  }"
                  :treeData="departmentList"
                  @department_select="
                    departmentSelected($event, 'rectification')
                  "
                  ref="department"
                  :style="{
                    color: troubleForm.rectificationDepartmentId
                      ? '#fff!important'
                      : '#6f6f77!important'
                  }"
                >
                </organization>
              </div>
            </div>
            <div class="contentList">
              <div class="contentLeft">
                <span class="notNull">*</span>
                <span class="contentLeftFont">整改负责人</span>
              </div>
              <div class="contentRight">
                <fz-people
                  class="changeDep"
                  :peopleId="troubleForm.rectificationDepartmentId"
                  :leader="troubleForm.rectificationLeader"
                  :peopleData="userList"
                  :name="
                    troubleForm.rectificationLeaderName || '选择整改负责人'
                  "
                  @selectPeople="getPeople($event, 'rectification')"
                  ref="people1"
                  :style="{
                    color: troubleForm.rectificationLeader
                      ? '#fff!important'
                      : '#6f6f77!important'
                  }"
                >
                </fz-people>
              </div>
            </div>
            <div class="contentList">
              <div class="contentLeft">
                <span class="notNull">*</span>
                <span class="contentLeftFont">整改期限</span>
              </div>
              <div class="contentRight border" @click="selectTime">
                <span v-if="troubleForm.rectificationTime">
                  {{
                    troubleForm.rectificationTime
                      | formatDate("YYYY-MM-DD HH:mm")
                  }}
                </span>
                <span v-else style="color:rgb(111, 111, 119);font-size:16px">
                  选择整改期限
                </span>
                <x-icon type="ios-arrow-right" fill="#fff" size="24"></x-icon>
              </div>
            </div>
            <div class="contentList">
              <div class="contentLeft">
                <span class="notNull">*</span>
                <span class="contentLeftFont">验收部门</span>
              </div>
              <div class="contentRight">
                <organization
                  class="changeDep"
                  :selectDepartment="{
                    departmentName: troubleForm.acceptanceDepartmentName
                  }"
                  :treeData="userServiceArea"
                  @department_select="departmentSelected($event, 'acceptance')"
                  ref="department"
                  :style="{
                    color: troubleForm.acceptanceDepartmentId
                      ? '#fff!important'
                      : '#6f6f77!important'
                  }"
                >
                </organization>
              </div>
            </div>
            <div class="contentList">
              <div class="contentLeft">
                <span class="notNull">*</span>
                <span class="contentLeftFont">验收负责人</span>
              </div>
              <div class="contentRight">
                <fz-people
                  class="changeDep"
                  :peopleId="troubleForm.acceptanceDepartmentId"
                  :leader="troubleForm.acceptanceLeader"
                  :peopleData="acceptancePeopleData"
                  :name="troubleForm.acceptanceLeaderName || '选择验收负责人'"
                  @selectPeople="getPeople($event, 'acceptance')"
                  ref="people2"
                  :style="{
                    color: troubleForm.acceptanceLeader
                      ? '#fff!important'
                      : '#6f6f77!important'
                  }"
                >
                </fz-people>
              </div>
            </div>
          </div>
        </template>
        <!-- <template v-else>
          <div class="info-list">
            <div style="font-size:16px; color: #fff;">
              {{ detail.remark }}
            </div>
          </div>
        </template> -->
      </div>
      <div class="contentList">
        <button type="button" class="subBtn" @click="cancel">取消</button>
        <button type="button" class="subBtn" @click="eventSubmit">
          保存
        </button>
      </div>
    </div>
  </div>
</template>

<script>
import Organization from "@/components/common/replace/sellWorkOrderDepartment";
import fzPeople from "@/components/common/replace/sellWorkOrderPeople";
import SafetyManageDao from "@/daos/safety_manage_dao";
import SpotCheckDao from "@/daos/spotCheckDao";
import TaskDao from "@/daos/task_dao";

import iuHeader from "@/components/common/header/index";
import FileUpload from "@/daos/file_upload";
import upload from "@/components/common/upload/upload";
import { TransferDom, Checker, CheckerItem } from "vux";
import dayjs from "dayjs";
export default {
  name: "safetyCheckResult",
  directives: {
    TransferDom
  },
  components: {
    fzPeople,
    Organization,
    iuHeader,
    upload,
    Checker,
    CheckerItem
  },
  data() {
    return {
      userQuestion: "",
      result: 1,
      listValue: 0,
      remark: "",
      leader: "",
      departmentId: "", //部门id
      selectPeopleId: "", //处理人id
      getSelectDevice: {}, //获取设备
      showConfirm: false,
      departmentIdshow: false,
      selectPeopleIdshow: false,
      deviceIdshow: false,
      partsIdshow: false,
      value: false,
      replaceCycleUnitText: ["", "天", "周", "月", "年"],
      departmentName: "",
      url: "",
      pictureList: [],
      deviceData: [],
      peopleData: [],
      departmentList: {},
      userList: [],
      rectificationPeopleData: [],
      acceptancePeopleData: [],
      loading: false,
      id: 0,
      isLastLevel: 0,
      edit: false,
      detail: {},
      backupForm: {},
      troubleForm: {
        id: null,
        orgId: 0,
        departmentId: "",
        checkSecurityRecordId: null,
        checkStandardItemRecordId: null,
        checkStandardId: null,
        checkStandardItemId: null,
        rectificationDepartmentId: "",
        rectificationLeader: "",
        rectificationTime: "",
        acceptanceDepartmentId: "",
        acceptanceLeader: "",
        status: 0, // 1待整改3待验收5已逾期7已完成
        troubleType: "", // 隐患类型
        troubleLevel: "",
        checkPoint: "",
        pictures: "",
        errorValue: "",
        submitter: "",
        remark: ""
      },
      store: {},
      curDepartment: {
        departmentName: "选择部门",
        id: -1
      }
    };
  },
  //返回首页的公共方法
  inject: ["backToHomepage"],
  created() {
    this.init();
  },
  computed: {
    user() {
      return this.$store.state.user;
    },
    userServiceArea() {
      if (this.$store.state.user) {
        let serviceAreaTree = this.$store.state.user.serviceAreaTree;
        serviceAreaTree.departmentName = "选择部门";
        serviceAreaTree.id = "";
        return serviceAreaTree;
      } else {
        return {};
      }
    },
    standard() {
      return this.$store.state.safetyCheck.standard;
    }
  },
  methods: {
    recovery() {
      window.scroll(0, 0);
    },
    back() {
      this.$router.go(-1);
    },
    init() {
      if (!this.user) {
        this.getUserInfo();
      } else {
        this.detail = this.$store.state.safetyCheck.standardItem;
        this.store.troubleForm = JSON.parse(JSON.stringify(this.troubleForm));
        if (this.$route.query.id) {
          this.getCheckStandardItemRecordDetails(this.$route.query.id);
        } else if (this.detail.id) {
          this.getCheckStandardPowerById(this.detail.id);
        }
      }
    },
    initEdit() {
      this.edit = true;
      this.remark = this.detail.content;
      this.result = this.detail.type;
      if (this.detail.checkImage) {
        this.pictureList = this.detail.checkImage.split(",");
      }
      if (this.detail.wxCheckTroubleRes) {
        Object.assign(this.troubleForm, this.detail.wxCheckTroubleRes);
        // this.getCheckTroubleDetails(this.detail.troubleId);
      }
    },
    getUserInfo() {
      this.$http(this.$API.getUserInfo, {}).then(res => {
        this.$store.commit("saveUser", res);
        this.init();
      });
    },
    // 当点击完成时，获取处理人
    getPeople(item, target) {
      if (!!item.id) {
        this.$set(this.troubleForm, `${target}Leader`, item.id);
      }
    },
    getAdminister(departmentId, tag) {
      TaskDao.getAdminister(departmentId, res => {
        this[`${tag}PeopleData`].splice(0);
        if (res && res.length) {
          this[`${tag}PeopleData`] = res;
        }
      });
    },
    getCheckStandardItemRecordDetails(itemRecordId) {
      SafetyManageDao.getCheckStandardItemRecordDetails(itemRecordId, res => {
        if (res) {
          this.detail = res;
          this.getCheckStandardPowerById(this.detail.checkStandardItemId);
          if (this.detail.type) {
            this.initEdit();
          }
        }
      });
    },
    getCheckStandardPowerById(checkStandardItemId) {
      SafetyManageDao.getCheckStandardPowerById(checkStandardItemId, res => {
        if (res) {
          this.departmentList.departmentName = "选择部门";
          this.departmentList.id = "";
          this.departmentList.children = res.departmentList;
          this.userList = res.userList;
          if (this.user.serviceAreaTree.children[0]) {
            this.troubleForm.acceptanceDepartmentId = this.user.serviceAreaTree.children[0].id
            this.troubleForm.acceptanceDepartmentName = this.user.serviceAreaTree.children[0].departmentName
          }
          this.troubleForm.acceptanceLeader = this.user.id
          this.troubleForm.acceptanceLeaderName = this.user.name
        }
      });
    },
    getCheckTroubleDetails(id) {
      SafetyManageDao.getCheckTroubleDetails(id, res => {
        if (res) {
          Object.assign(this.troubleForm, res);
          this.remark = this.troubleForm.remark;
          this.result = 3 + this.troubleForm.errorValue;
          if (this.troubleForm.pictures) {
            this.pictureList = this.troubleForm.pictures.split(",");
          }
        }
      });
    },
    eventCheckItem(value) {
      // console.log(value);
      this.troubleForm.errorValue = value.slice(1);
    },
    optionValueToArr(option, type) {
      if (!option) {
        return [];
      }
      let arr = JSON.parse(option);
      if (arr) {
        let text = arr.filter(e => e.type === type);
        return text.map(e => e.name);
      }
      return [];
      // console.log(text);
    },
    // 点击完成的时候，获取部门数据
    departmentSelected(params, target) {
      // console.log(params);
      if (!!params.id) {
        this.curDepartment = params;
        this.troubleForm[`${target}DepartmentId`] = params.id;
        this.troubleForm[`${target}DepartmentName`] = params.departmentName;
        this.troubleForm[`${target}Leader`] = "";
        this.troubleForm[`${target}LeaderName`] = "";
        this.$nextTick(e => {
          this.$refs.people1.departPeople = "";
          this.$refs.people2.departPeople = "";
        });
      } else {
        this.troubleForm[`${target}DepartmentId`] = this.curDepartment.id;
      }
      this.getAdminister(params.id || this.curDepartment.id, target);
    },
    // 当点击完成时，获取处理人
    selectReceiver(item) {
      if (!!item.id) {
        this.receiver = item.id;
      }
    },
    cancel() {
      this.back();
    },
    onCancel() {
      this.showConfirm = false;
    },
    eventSubmit() {
      let text = "";
      let result = +this.result;
      if (result == 1) {
      } else if (result == 2) {
        if (!this.remark) {
          text = "请输入详细说明";
        }
        if (!this.pictureList.length) {
          text = "请上传照片";
        }
      } else if (result == 3) {
        if (!this.remark) {
          text = "请输入详细说明";
        } else if (!this.pictureList.length) {
          text = "请上传照片";
        } else if (!this.troubleForm.acceptanceDepartmentId) {
          text = "请选择验收部门";
        } else if (!this.troubleForm.acceptanceLeader) {
          text = "请选择验收负责人";
        } else if (!this.troubleForm.rectificationTime) {
          text = "请选择整改期限";
        } else if (
          dayjs(this.troubleForm.rectificationTime).isBefore(dayjs())
        ) {
          text = "整改期限请大于现在的时间";
        } else if (!this.troubleForm.rectificationDepartmentId) {
          text = "请选择整改部门";
        } else if (!this.troubleForm.rectificationLeader) {
          text = "请选择整改负责人";
        }
      } else {
        text = "请选择检查结果";
      }
      if (text) {
        this.$vux.toast.show({ text, type: "warn" });
        return;
      }
      this.$vux.loading.show({
        text: "提交中..."
      });
      if (result == 3) {
        this.handleCheckTrouble();
      } else {
        this.handleCheckSecurityRecord();
      }
    },
    handleCheckSecurityRecord() {
      // let params = Object.assign({}, this.$store.state.safetyCheck.details);
      let data = {
        checkImage: this.pictureList.join(","),
        content: this.remark,
        submitUserId: this.user.id,
        type: this.result
      };
      data.checkSecurityRecordId = +this.detail.checkSecurityRecordId || null;
      if (data.checkSecurityRecordId) {
        data.id = +this.detail.id;
        data.checkStandardId = +this.detail.checkStandardId || null;
        data.checkSecurityConfigId = +this.detail.checkSecurityConfigId || null;
        data.checkStandardRecordId = +this.detail.checkStandardRecordId || null;
        data.checkStandardItemId = +this.detail.checkStandardItemId || null;
      } else {
        data.id = null;
        data.checkStandardItemId = +this.detail.id;
      }

      data.wxCheckTroubleReq =
        this.result == 3 ? Object.assign({}, this.troubleForm) : null;

      console.log(data);

      if (data.checkSecurityRecordId) {
        SafetyManageDao.postCheckStandardItemSubmit(data, this.handleResult);
      } else {
        SafetyManageDao.postCheckStandardItemNoPlanSubmitSubmit(
          data,
          this.handleResult
        );
      }
    },
    handleResult(res) {
      this.$vux.loading.hide();
      this.pictureList.splice(0);
      this.remark = "";
      this.result = 1;
      this.$vux.toast.show({ text: "保存成功！", type: "success" });
      this.back();
    },
    handleCheckTrouble() {
      this.troubleForm.remark = this.remark;
      this.troubleForm.pictures = this.pictureList.join(",");
      this.troubleForm.submitter = this.user.id;
      this.troubleForm.departmentId = this.user.department.id;
      this.troubleForm.orgId = this.user.org.id;
      this.troubleForm.checkPoint = this.detail.checkStandardItemName;
      this.troubleForm.checkSecurityRecordId =
        +this.detail.checkSecurityRecordId || null;

      if (this.troubleForm.checkSecurityRecordId) {
        // 计划进入
        this.troubleForm.checkStandardItemId = this.detail.checkStandardItemId;
        this.troubleForm.checkStandardId = this.detail.checkStandardId;
        this.troubleForm.checkStandardItemRecordId = this.detail.id;
      } else {
        // 风险进入
        this.troubleForm.checkStandardItemId = +this.detail.id;
        this.troubleForm.checkStandardId = +this.standard.checkStandardId;
        this.troubleForm.checkStandardItemRecordId = this.detail.checkStandardItemRecordId;
      }

      this.handleCheckSecurityRecord();

      // SafetyManageDao.postCheckTrouble(this.troubleForm, res => {
      //   if (res) {
      //     this.troubleForm.id = res;
      //     this.handleCheckSecurityRecord();
      //   }
      // });
    },
    handleDeleteTrouble(troubleId) {
      SafetyManageDao.deleteCheckTrouble(troubleId);
    },
    troubleFormInit() {
      this.troubleForm = JSON.parse(JSON.stringify(this.store.troubleForm));
      this.pictureList.splice(0);
      this.remark = "";
    },
    isNumber(source) {
      let flag = /^([0-9]*)$/.test(source);
      // console.log(flag,source);
      return flag;
    },
    isNumber2(source) {
      let flag = /^([0-9]*|\d*\.\d{1,2}?)$/.test(source);
      // console.log(flag,source);
      return flag;
    },
    selectTime(index) {
      let _this = this;
      let now = dayjs();
      this.$vux.datetime.show({
        cancelText: "取消",
        confirmText: "确定",
        format: "YYYY-MM-DD HH:mm",
        startDate: now.format("YYYY-MM-DD"),
        onConfirm(value) {
          _this.troubleForm.rectificationTime = dayjs(value);
        },
        onHide(type) {
          if (type === "cancel") {
            // that.banci = value
          }
        }
      });
    },
    saveSellWorkOrder(obj) {
      localStorage.setItem("sellWorkOrder", JSON.stringify(obj));
    },
    getSellWorkOrder(obj) {
      let sellWorkOrder = JSON.parse(localStorage.getItem("sellWorkOrder"));
      return sellWorkOrder;
    },
    oversize() {
      this.$vux.toast.text("文件大小请不要超过5MB。");
    },
    overcount() {
      this.$vux.toast.text("文件个数请小于4个。");
    },
    deleteList(index) {
      this.pictureList.splice(index, 1);
    },
    afterRead(files) {
      let formData = new FormData();
      formData.append("file", files);
      this.loading = true;
      FileUpload.upload(
        formData,
        res => {
          // console.log(res);
          this.loading = false;
          this.pictureList.push(res);
        },
        err => {
          this.loading = false;
          this.$vux.toast.text(err);
        }
      );
    }
  }
};
</script>
<style lang="less">
.replace-box {
  .vux-x-switch.weui-cell_switch {
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .vux-tap-active:active {
    background: none;
  }
}
</style>
<style lang="less" scoped>
textarea::-webkit-input-placeholder {
  color: rgb(111, 111, 119) !important;
}
textarea:-moz-placeholder  {
  color: rgb(111, 111, 119) !important;
}

textarea::-moz-placeholder  {
  color: rgb(111, 111, 119) !important;
}
textarea:-ms-input-placeholder  {
  color: rgb(111, 111, 119) !important;
}

input {
  &::placeholder {
    font-size: 14px;
    color: gray !important;
  }
}
* {
  padding: 0;
  margin: 0;
  list-style: none;
  border: none;
}
html,
body {
  width: 100%;
}
.replace-box {
  width: 100%;
  min-height: 100vh;
  height: auto;
  background-color: #18182c;
}
.backHistory {
  transform: rotate(90deg);
  -ms-transform: rotate(90deg); /* IE 9 */
  -moz-transform: rotate(90deg); /* Firefox */
  -webkit-transform: rotate(90deg); /* Safari 和 Chrome */
  -o-transform: rotate(90deg);
  line-height: 40px;
  font-size: 25px !important;
  margin-left: 10px;
}
.pageTop {
  height: 40px;
  color: #fff;
  position: fixed;
  height: 40px;
  width: 100%;
  left: 0px;
  top: 0px;
  background-color: #22233f;
  z-index: 9;
  .sellWorkOrder_header_title {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 16px;
  }
}
.content {
  width: 100%;
  height: 100%;
  // overflow-y: auto;
  padding: 0 8px 20px;
  box-sizing: border-box;
  background-color: #18182c;
}

.cate-nfo {
  height: auto;
  // min-height: calc(~"100vh" - 80px);
  padding-bottom: 8px;
  border-radius: 8px;
  background-color: #18182c;
  .info-list {
    background: #22233f;
    padding: 8px;
    margin: 8px 0;
    // min-height: 260px;
    .info-list-item {
      display: flex;
      flex-wrap: wrap;
      margin: 8px 0;
    }
    .info-title {
      color: rgba(255, 255, 255, 0.5);
      font-size: 16px;
      // margin-right: 30px;
      width: 100px;
      text-align: right;
    }

    .info-value {
      flex: 1;
      font-size: 16px;
      color: #fff;

      .status1,
      .status4 {
        color: #4fa8e7;
      }
      .status3 {
        color: #456de6;
      }
      .status5,
      .status7,
      .status11 {
        color: #dd9710;
      }
      img {
        max-width: 100px;
        height: auto;
        margin-bottom: 8px;
        margin-right: 8px;
      }
    }
    .modify-btn {
      font-size: 14px;
      margin-left: 8px;
      color: gray;
    }
    .warning {
      color: #ff2c2c;
    }
    .modify {
      font-size: 16px;
      padding: 8px;
      color: rgba(255, 255, 255, 0.5);
    }
  }
}
.contentList {
  padding: 8px 0;
  overflow: hidden;
  // border-bottom: 1px solid #464656;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  &.full {
    flex-wrap: wrap;
    .contentRight {
      width: 100%;
      margin-top: 3px;
    }
  }
  -webkit-text-size-adjust: 100% !important;
  .err-msg {
    flex: none;
    width: 100%;
    color: #ff2c2c;
    font-size: 12px !important;
    padding-left: 35%;
    -webkit-text-size-adjust: 100% !important;
  }
}

.upload {
  display: flex;
  flex-direction: column;
  // align-items: center;
  justify-content: space-between;
}
.contentLeft,
.contentRight {
  font-size: 17px;
}
.contentLeft {
  color: #ffffff;
  flex: none;
}
.contentRight {
  position: relative;
  color: #fff;
  box-sizing: border-box;
  // margin-top: 3px;
  width: 65%;
  // display: flex;
  // justify-content: flex-end;
  //   .iu-check {
  //     display: flex;
  //     .iu-check-box {
  //         padding: 6px;

  //     }
  //   }

  .produce-data-list-read {
    padding: 8px 0;
    .read-item {
      border: 1px solid #777;
      padding: 5px 15px;
      margin-right: 5px;
    }
    .read-item-selected {
      border: 1px solid #177fff;
    }
  }
  &.border {
    // border-bottom: 0.026667rem solid #464656;
    display: flex;
    justify-content: flex-end;
  }
  input {
    // text-align: right;
    touch-action: none;
    width: 86%;
    border: 0;
    color: #ffffff;
    font-size: 16px;
    margin-right: 4px;
    &.full {
      width: 100%;
    }
  }
}
.cancelPos {
  position: static;
  width: auto !important;
}
.notNull {
  color: #d81e06;
}

.userQuestion {
  font-size: 17px;
  width: 100%;
  height: 100px;
  border-radius: 6px;
  padding: 10px;
  box-sizing: border-box;
  background-color: transparent;
  border: 1px solid #747480;
  color: #fff;
  text-align: left !important;
}
.userQuestion::-webkit-input-placeholder {
  color: #6f6f77;
  text-align: left;
}
.subBtn {
  width: 40%;
  height: 40px;
  line-height: 1;
  padding: 13px 0;
  box-sizing: border-box;
  text-align: center;
  margin: 0 auto;
  border-radius: 13px;
  background-color: #456de6;
  color: #ffffff;
  margin: 0 4%;
  font-size: 17px;
  margin-top: 0;
  &.is-edited {
    color: #d2d2d2;
    background-color: gray;
  }
}
.iu-select {
  height: 26px;
  width: 100%;
  padding: 2px 4px 3px;
  border: none;
  outline: none;
  border: 1px solid #eee;
  border-radius: 2px;
  font-size: 14px;
  color: #fff;
  background: transparent;
  option {
    color: #000;
    background: rgba(255, 255, 255, 0.9);
  }
  &:invalid {
    color: #999;
  }
}
</style>
